<template>
  <view class="today-tasks-page">
    <z-paging ref="paging" v-model="taskList" @query="queryList" :auto="true" :refresher-enabled="true">
      <up-navbar title="今日处理" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
      <view class="task-list">
        <task-item 
          v-for="(task, index) in taskList" 
          :key="index" 
          :task="task"
          @click="handleTaskClick(task)"
        />
        <up-empty v-if="taskList.length === 0" mode="list" text="暂无今日处理事项"/>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import TaskItem from './components/TaskItem.vue';
import { getTodayTasks } from '@/api';

const paging = ref(null);
const taskList = ref([]);

// 查询列表数据
const queryList = async (pageNo, pageSize) => {
  try {
    // 暂时使用模拟数据，不调用真实API
    // const res = await getTodayTasks({ pageNo, pageSize });
    // return res.data;
    console.log('使用模拟数据');
    const mockData = mockGetTodayTasks();
    // 直接赋值给paging.value而不是返回数据
    if (paging.value) {
      paging.value.complete(mockData.list);
    }
    return null;
  } catch (error) {
    console.error('获取今日处理事项失败', error);
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    });
    if (paging.value) {
      paging.value.complete([]);
    }
    return null;
  }
};

// 模拟获取今日处理事项数据
const mockGetTodayTasks = () => {
  return {
    list: [
      {
        id: '1',
        title: '订单申诉处理',
        content: '用户对订单#12345678提出申诉，原因：收费不合理',
        time: '09:30',
        type: 'appeal', // 申诉类型
        status: 'pending', // 待处理
        targetUrl: '/pages/order-appeal/detail',
        params: { id: '12345678' }
      },
      {
        id: '2',
        title: '车辆认证审核',
        content: '用户张三提交了车辆认证申请，车牌号：粤B12345',
        time: '10:15',
        type: 'verify', // 认证类型
        status: 'pending', // 待处理
        targetUrl: '/pages/vehicle-verify/detail',
        params: { id: '87654321' }
      },
      {
        id: '3',
        title: '咨询留言回复',
        content: '用户李四咨询：如何申请月卡？',
        time: '11:20',
        type: 'message', // 留言类型
        status: 'pending', // 待处理
        targetUrl: '/pages/customer-service-info/detail',
        params: { id: '56781234' }
      },
      {
        id: '4',
        title: '工单派发',
        content: '停车场A区设备故障，需要派发维修工单',
        time: '13:45',
        type: 'workorder', // 工单类型
        status: 'pending', // 待处理
        targetUrl: '/pages/work-order/detail',
        params: { id: '43218765' }
      }
    ],
    total: 4,
    pageNo: 1,
    pageSize: 10
  };
};

// 处理任务点击事件
const handleTaskClick = (task) => {
  // 更新任务状态为已读
  task.status = 'processed';
  
  // 跳转到对应的详情页面
  if (task.targetUrl) {
    uni.navigateTo({
      url: `${task.targetUrl}?${Object.entries(task.params || {}).map(([key, value]) => `${key}=${value}`).join('&')}`
    });
  }
};
</script>

<style lang="scss" scoped>
.today-tasks-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.task-list {
  padding: 20rpx;
}
</style>